<template>
	<view class="home_wrap">
		<y-navbar :showLeft="false" title="小鹭职荐"  />
		<view class="container">
			<u-tabs v-if="!isLogin" :list="notLogin" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<u-tabs v-if="isLogin" :list="login" :is-scroll="false" :current="current" @change="change"></u-tabs>
			
			<view class="sub_content">
				<text class="city_pos" @click="selectCity" v-text="getCity"></text>
				<u-button type="primary" plain size="mini" @click="filtrate">筛选</u-button>
			</view>
			
			<view class="container_list" @click="toDetail(2)" v-for="(item, index) in list" :key="index">
				<view class="list_header">
					<text>{{item.profession}}</text>
					<view class="header_intro">
						<text class="identical_info">{{item.city}}</text>
						<text class="identical_info">{{item.education}}</text>
						<text class="identical_info">{{item.salary}}k</text>
					</view>
					<view class="position_type">
						<text class="position_text">{{dispose(item.workType)}}</text>
					</view>
				</view>
				<view class="list_content">
					<view class="left_img">
						<img src="../../static/logo.png" alt="" />
					</view>
					<view class="desc">
						<text>{{item.company}}</text>
						<view>{{item.intro}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 城市选择S -->
		<y-citycurtain ref="cityCurtain" />
		<!-- 城市选择E -->
		
		<!-- 筛选S -->
		<Filtrate ref="filtrate" @confirm="confirm" />
		<!-- 筛选E -->
	</view>
</template>

<script>
	import Filtrate from './filtrate/index.vue'
	export default {
		data() {
			return {
				notLogin: [{
					name: '推荐'
				}],
				login: [
					{name: '产品经理', value: 'manage'},
					{name: '产品助理', value: 'assistant'},
					{name: '产品专员', value: 'commissioner'}
				],
				current: 0,
				isLogin: true,
				cityText: '暂无区域',
				list: [
					{profession: '运营', city: '武汉市', education: '本科', salary: '6-10', workType: '0', company: '武汉华林梦想科技有限公司', intro: '移动互联网 | 公司规模100-500人 | 天使轮'},
					{profession: '人事', city: '武汉市', education: '本科', salary: '5-10', workType: '1', company: '武汉华林梦想科技有限公司', intro: '移动互联网 | 公司规模100-500人 | 天使轮'},
					{profession: '前端开发工程师', city: '武汉市', education: '本科', salary: '5-10', workType: '2', company: '武汉华林梦想科技有限公司', intro: '移动互联网 | 公司规模100-500人 | 天使轮'},
					{profession: '市场营销', city: '武汉市', education: '本科', salary: '5-10', workType: '2', company: '武汉华林梦想科技有限公司', intro: '移动互联网 | 公司规模100-500人 | 天使轮'},
					{profession: '硬件开发工程师', city: '武汉市', education: '本科', salary: '5-10', workType: '1', company: '武汉华林梦想科技有限公司', intro: '移动互联网 | 公司规模100-500人 | 天使轮'}
				]
			}
		},
		onLoad() {

		},
		computed: {
			getCity() {
				return this.$store.getters.getCity
			}
		},
		methods: {
			change(index) {
				this.current = index
				console.log(this.current)
			},
			
			// 区域选择幕布
			selectCity() {
				this.$refs.cityCurtain.showCurtain()
			},
			
			// 点击筛选
			filtrate() {
				this.$refs.filtrate.showCurtain()
				this.$refs.filtrate.init()
			},
			
			// 确认筛选
			confirm(data) {
				console.log(data)
			},
			
			// 查看岗位详情
			toDetail(data) {
				let id = data
				uni.navigateTo({
					url: '/pages/position-details/index?id=' + id
				})
			},
			
			// 计算职位
			dispose(type) {
				return {
					'0': '全职',
					'1': '兼职',
					'2': '半职'
				}[type]
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		components: {
			Filtrate
		}
	}
</script>

<style scoped lang="scss">
	.home_wrap {
		/* #ifdef APP-PLUS */
		margin-top: 60rpx;
		/* #endif */		
		.container {
			/* #ifdef MP-WEIXIN */
				padding-top: 120rpx;
			/* #endif*/
			/* #ifdef H5 */
				padding-top: 90rpx;
			/* #endif */
			.sub_content {
				margin-top: 20rpx;
				padding-right: 20rpx;
				text-align: right;
				.city_pos {
					margin-right: 20rpx;
				}
			}
			
			.container_list {
				padding: 40rpx 40rpx 0;
				.list_header {
					position: relative;
					padding-bottom: 10rpx;
					border-bottom: 2rpx solid #ccc;
					.header_intro {
						display: flex;
						.identical_info {
							margin-right: 20rpx;
						}
					}
					.position_type {
						position: absolute;
						right: 0;
						top: 0;
						.position_text {
							padding: 10rpx 20rpx 10rpx 30rpx;
							border-radius: 40rpx 0 0 40rpx;
							background: rgba(26, 127, 236, 70%);
							color: #fff;
						}
					}
				}
				
				.list_content {
					display: flex;
					margin-top: 20rpx;
					.left_img {
						width: 80rpx;
						height: 80rpx;
						img {
							width: 80rpx;
							height: 80rpx;
						}
					}
					.desc {
						margin-left: 20rpx;
						color: #928f8f;
					}
				}
			}
		}
	}
</style>
